import { View } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import { useRef, useState, useCallback } from 'react'
import utils from '@/utils'
import BtLayout from '@/BtComponents/BtLayout'
import BtScroll from '@/BtComponents/BtScroll'
import BtCustomForm, { FormItemType, FormItemConfig } from '@/BtComponents/BtCustomForm'
import Arrow from '@taroify/icons/Arrow'
import { Button } from "@taroify/core"
import useCreateStaffQrcodeStore, { setFormData, rules, resetStore } from './useCreateStaffQrcodeStore'
import './index.scss'

function CreateStaffQrcode() {
  const formRef = useRef<any>(null)
  const form = useCreateStaffQrcodeStore(state => state.formData)
  const [ selector ] = useState([{id: '1', name: 'China'}, {id: '2', name: 'USA'}])
  const [formConfig, setFormConfig] = useState<FormItemConfig[]>(() => ([
    {
      type: FormItemType.INPUT,
      label: '活码名称',
      prop: 'name',
      maxLength: 30,
      show: false
    },
    {
      type: FormItemType.PICKER,
      label: '欢迎语',
      prop: 'welcomeMsg',
      selector: selector,
      onChange: (value) => {
        setFormConfig(prev => {
          const newConfig = [...prev]
          newConfig[0] = {
            ...newConfig[0],
            show: value == 1
          }
          return newConfig
        })
      }
    },
    {
      type: FormItemType.PICKER,
      label: '通过方式',
      prop: 'approvalType',
      selector: selector,
      iconRemark: '备注1'
    },
    {
      type: FormItemType.CLASSIFY,
      label: '客户备注名'
    },
    {
      type: FormItemType.SWITCH,
      label: '客户标签',
      enableProp: 'enableTags',
      children: [
        {
          type: FormItemType.PICKER,
          prop: 'tags',
          selector: selector
        }
      ]
    },
    {
      type: FormItemType.CLASSIFY,
      label: '活码设置'
    },
    {
      type: FormItemType.SWITCH,
      label: '活码头像',
      enableProp: 'enableAvatar',
      children: [
        {
          type: FormItemType.UPLOAD,
          prop: 'avatar'
        }
      ]
    },
    {
      type: FormItemType.SWITCH,
      label: '识客配置',
      enableProp: 'enableRecConfig',
      children: [
        {
          type: FormItemType.CUSTOM,
          prop: 'custom',
          render: () => (
            <View className='flex justify-between items-center' onClick={handleGotoConfigPage}>
              <View className='text-emerald-600'>去配置</View>
              <Arrow color='#333' />
            </View>
          )
        }
      ]
    }
  ]))

  useLoad(async () => {
    await utils.$initPage()
    resetStore()
  })

  const handleChange = useCallback((value: any, key: string) => {
    setFormData({
      ...form,
      [key]: value
    })
  }, [form])

  const handleGotoConfigPage = () => {
    Taro.navigateTo({
      url: '/pages/createStaffQrcode/recConfigPage/index'
    })
  }

  const handleSubmit = async () => {
    const errors = await formRef.current.validate()
    if (!errors) {
      utils.$toast('提交成功')
    }
  }

  return (
    <BtLayout
      config={{
        title: '新建员工活码'
      }}
    >
      <View className='create-staff-qrcode flex flex-col'>
        <BtScroll>
          <BtCustomForm
            config={formConfig}
            model={form}
            onChange={handleChange}
            rules={rules}
            ref={formRef}
          />
        </BtScroll>
        <View className='submit-button'>
          <Button
            color='primary'
            block
            onClick={handleSubmit}
          >
            确定
          </Button>
        </View>
      </View>
    </BtLayout>
  )
}

export default CreateStaffQrcode
